<!DOCTYPE html>
<html lang=zh-CN>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta property="og:description" content="伍一的笔记，Kool&#39;s Blog">
    <meta property="og:type" content="website">
    <meta name="description" content="伍一的笔记，Kool&#39;s Blog">
    <meta name="keyword"  content="伍一,伍一的博客">
    <link rel="shortcut icon" href="/img/favicon.ico">

    <title>
        
        看我写的H5扫码枪软件如何让手机秒变扫码枪 - 伍一的笔记 | Kool&#39;s Blog
        
    </title>

    <!-- Custom CSS -->
    
<link rel="stylesheet" href="/css/aircloud.css">

    
<link rel="stylesheet" href="/css/gitment.css">

    <!--<link rel="stylesheet" href="https://imsun.github.io/gitment/style/default.css">-->
    <link href="//at.alicdn.com/t/font_620856_28hi1hpxx24.css" rel="stylesheet" type="text/css">
    <!-- ga & ba script hoook -->
    <script></script>

    







  
  
  
    <script type="text/javascript">
      var _hmt = _hmt || []
      ;(function () {
        var hm = document.createElement('script')
        hm.src = 'https://hm.baidu.com/hm.js?7e771422dc6f742629fa26747480f822'
        var s = document.getElementsByTagName('script')[0]
        s.parentNode.insertBefore(hm, s)
      })()
    </script>
  



<meta name="generator" content="Hexo 6.3.0"></head>

<body>

<div class="site-nav-toggle" id="site-nav-toggle">
    <button>
        <span class="btn-bar"></span>
        <span class="btn-bar"></span>
        <span class="btn-bar"></span>
    </button>
</div>

<div class="index-about">
    <i> 爱生活爱编码 </i>
</div>

<div class="index-container">
    
    <div class="index-left">
        
<div class="nav" id="nav">
    <div class="avatar-name">
        <div class="avatar radius">
            <img src="/img/zkool.png" />
        </div>
        <div class="name">
            <i>伍一</i>
        </div>
    </div>
    <div class="contents" id="nav-content">
        <ul>
            <li >
                <a href="/">
                    <i class="iconfont icon-shouye1"></i>
                    <span>主页</span>
                </a>
            </li>
            <li >
                <a href="/html/scanner/index.html">
                    <i class="iconfont icon-guidang2"></i>
                    <span>H5条码枪</span>
                </a>
            </li>
            <li >
                <a href="/html/udi/index.html">
                    <i class="iconfont icon-sousuo1"></i>
                    <span>UDI</span>
                </a>
            </li>
            <li >
                <a href="/tags">
                    <i class="iconfont icon-biaoqian1"></i>
                    <span>标签</span>
                </a>
            </li>
            <li >
                <a href="/archives">
                    <i class="iconfont icon-guidang2"></i>
                    <span>存档</span>
                </a>
            </li>
            <li >
                <a href="/collect/">
                    <i class="iconfont icon-shoucang1"></i>
                    <span>收藏</span>
                </a>
            </li>
            <li >
                <a href="/about/">
                    <i class="iconfont icon-guanyu2"></i>
                    <span>关于</span>
                </a>
            </li>
            
            <li>
                <a id="search">
                    <i class="iconfont icon-sousuo1"></i>
                    <span>搜索</span>
                </a>
            </li>
            
        </ul>
    </div>
    
        <div id="toc" class="toc-article">
    <ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E9%9C%80%E6%B1%82"><span class="toc-text">需求</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E4%BB%BB%E5%8A%A1%E8%A7%A3%E6%9E%90"><span class="toc-text">任务解析</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%AE%9E%E6%88%98"><span class="toc-text">实战</span></a></li></ol>
</div>
    
</div>


<div class="search-field" id="search-field">
    <div class="search-bg" id="search-bg"></div>
    <div class="search-container">
        <div class="search-input">
            <span id="esc-search"> <i class="icon-fanhui iconfont"></i></span>
            <input id="search-input"/>
            <span id="begin-search">搜索</span>
        </div>
        <div class="search-result-container" id="search-result-container">

        </div>
    </div>
</div>

        <div class="index-about-mobile">
            <i> 爱生活爱编码 </i>
        </div>
    </div>
    
    <div class="index-middle">
        <!-- Main Content -->
        


<div class="post-container">
    <div class="post-title">
        看我写的H5扫码枪软件如何让手机秒变扫码枪
    </div>

    <div class="post-meta">
        <span class="attr">发布于：<span>2024-02-25 12:47:53</span></span>
        
        <span class="attr">标签：/
        
        <a class="tag" href="/tags/#编程综合" title="编程综合">编程综合</a>
        <span>/</span>
        
        
        </span>
        <span class="attr">访问：<span id="busuanzi_value_page_pv"></span>
</span>
</span>
    </div>
    <div class="post-content ">
        <p>工作中偶尔需要使用扫码枪，但是手头又没有，跟老板说买一把，老板觉得这东西不常用。于是想着是否可以利用手机扫码功能…到微信小程序里搜索“扫码枪”，发现里面有一个叫“超级扫码枪”的小程序，当看完它实现的功能，瞬间想起“贫穷限制了你的想象力”这句话。下面是关于超级扫码枪的介绍：</p>
<blockquote>
<p>超级扫码枪是一款通过小程序扫码（条形码，二维码）后，实时发送到电脑（PC）的轻应用。适用于扫商品包装上的条形码或二维码、扫快递单号、扫发票二维码等等。</p>
</blockquote>
<p>我就在琢磨它的实现原理，我自己是否也可以实现它的功能。再者说，一款软件有它的优点自然也有它的缺点，我要实现该软件的基本功能就得比它更简单、更安全、更易使用。</p>
<h1 id="需求"><a href="#需求" class="headerlink" title="需求"></a>需求</h1><p>实现手机变扫码枪，调用手机摄像头扫码后实时发送到电脑（PC）的文本框内。</p>
<h1 id="任务解析"><a href="#任务解析" class="headerlink" title="任务解析"></a>任务解析</h1><ul>
<li><p>首先要想电脑（PC）端怎么模拟键盘录入信息</p>
</li>
<li><p>其次手机端怎么调用摄像头并扫码</p>
</li>
<li><p>最后手机端要把扫码结果发送到电脑（PC）端</p>
</li>
</ul>
<h1 id="实战"><a href="#实战" class="headerlink" title="实战"></a>实战</h1><ul>
<li><p>电脑（PC）端写个Java客户端Swing程序，并利用Robot模拟键盘录入。Java客户端的实现借鉴了两个项目：</p>
<ol>
<li><p><a target="_blank" rel="noopener" href="https://gitee.com/wmazh/easytodo">https://gitee.com/wmazh/easytodo</a></p>
</li>
<li><p><a target="_blank" rel="noopener" href="https://gitee.com/s2689763871_admin/sftptool">https://gitee.com/s2689763871_admin/sftptool</a></p>
</li>
</ol>
</li>
<li><p>手机端写个H5页面调用手机摄像头并扫码【注意：用html5-qrcode 要求web服务器必须https协议访问，如果不是的话，是不能使用webRTC的，也就没有获取摄像头的权限了。】</p>
<ol>
<li><p>使用了这个前端类库：<a target="_blank" rel="noopener" href="https://github.com/mebjas/html5-qrcode">https://github.com/mebjas/html5-qrcode</a></p>
</li>
<li><p>这是H5的示例：<a target="_blank" rel="noopener" href="https://github.com/mebjas/html5-qrcode/tree/master/examples/html5">https://github.com/mebjas/html5-qrcode/tree/master/examples/html5</a></p>
</li>
<li><p>结合它提供的线上实例：<a target="_blank" rel="noopener" href="https://blog.minhazav.dev/research/html5-qrcode.html">https://blog.minhazav.dev/research/html5-qrcode.html</a></p>
</li>
</ol>
</li>
<li><p>电脑（PC）端起WebSocket服务，手机端连接该服务并实时发送消息</p>
</li>
<li><p>资源链接：</p>
<ol>
<li><p>项目源码地址：<a target="_blank" rel="noopener" href="https://gitee.com/zkool/h5-barcode-gun">https://gitee.com/zkool/h5-barcode-gun</a></p>
</li>
<li><p>电脑（PC）端下载地址：<a target="_blank" rel="noopener" href="https://gitee.com/zkool/h5-barcode-gun/releases/tag/V1.0">H5扫码枪 V1.0 · zkool&#x2F;h5-barcode-gun</a></p>
</li>
<li><p>视频介绍地址：<a target="_blank" rel="noopener" href="https://www.bilibili.com/video/BV1CH4y1L78Z">https://www.bilibili.com/video/BV1CH4y1L78Z</a></p>
</li>
</ol>
</li>
</ul>

        
            <div class="donate-container">
    <div class="donate-button">
        <button id="donate-button">赞赏</button>
    </div>
    <div class="donate-img-container hide" id="donate-img-container">
        <img id="donate-img" src="" data-src="/img/my_wechat.jpg">
        <p> 感谢鼓励 </p>
    </div>
</div>
        
        <br />
        <div id="comment-container">
        </div>
        <div id="disqus_thread"></div>
        <div id="lv-container"></div>
        <div class="giscus"></div>
    </div>
</div>

    </div>
</div>


<footer class="footer">
    <ul class="list-inline text-center">
        
        

        
        <li>
            <a target="_blank" href="http://weibo.com/zha0ku1">
                            <span class="fa-stack fa-lg">
                                  <i class="iconfont icon-weibo"></i>
                            </span>
            </a>
        </li>
        

        

        
        <li>
            <a target="_blank"  href="https://github.com/zkool">
                            <span class="fa-stack fa-lg">
                                <i class="iconfont icon-github"></i>
                            </span>
            </a>
        </li>
        

        

    </ul>
    
    <p>
        <span>/</span>
        
        <span><a target="_blank" rel="noopener" href="https://niexiaotao.com">Xiaotao&#39;s Page</a></span>
        <span>/</span>
        
        <span><a href="#">It helps SEO</a></span>
        <span>/</span>
        
    </p>
    
    <p>
        <span id="busuanzi_container_site_pv">
            <span id="busuanzi_value_site_pv"></span>PV
        </span>
        <span id="busuanzi_container_site_uv">
            <span id="busuanzi_value_site_uv"></span>UV
        </span>
        Created By <a target="_blank" rel="noopener" href="https://hexo.io/">Hexo</a>  Theme <a target="_blank" rel="noopener" href="https://github.com/aircloud/hexo-theme-aircloud">AirCloud</a></p>
</footer>




</body>

<script>
    // We expose some of the variables needed by the front end
    window.hexo_search_path = "search.json"
    window.hexo_root = "/"
    window.isPost = true
</script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

<script src="/js/index.js"></script>

<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>






</html>
